<template>
  <div ref="vantaRef" style="width: 100%;overflow: hidden;margin: 0 auto; height: 600px">
    <div style="width: 600px;height: 400px;margin: 0 auto;">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item style="margin-top:100px">
          <h1 style="font-size:30px; color: white">立即注册<a href="javascript:void(0)"
                                             style="color: #0aa1ed;float: right;
                                              text-decoration: none;
                                              font-size: 15px;"
                                             @click="goLogin()">已有账号？现在登录</a></h1>
        </el-form-item>
        <el-form-item label="用户名">
          <el-input v-model="user.username" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item label="电话号码">
          <el-input v-model="user.phone" placeholder="请输入电话号码"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="user.password" placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item label="注册">
          <el-button type="primary" @click="reg()">注册</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import * as THREE from "three";
import BIRDS from "vanta/src/vanta.birds";

export default {
  name: "RegView",
  data() {
    return {
      user: {username: "",phone:"",password:""}
    }
  },
  methods: {
    goLogin(){
      if (this.$route.path!='/login'){
        this.$router.push('/login');
      }
    },
    reg(){

      this.axios.post('http://localhost:19500/v1/users/reg',this.user)
          .then((response)=>{
            if (response.data.code==20000){
              this.$message.success("注册成功！");
              this.$router.push('/login');
            }else {
              this.$message.error(response.data.message);
            }
          })
    },
  },
  mounted() {
    this.vantaEffect = BIRDS({
      el: this.$refs.vantaRef,
      THREE: THREE,
    });
    // 修改颜色时 cells 需要全大写字母 可生效
    VANTA.BIRDS({
      el: this.$refs.vantaRef,
      mouseControls: true,
      touchControls: true,
      gyroControls: false,
      minHeight: 600.0,
      minWidth: 400.0,
      scale: 1.0,
      color1: '#0092FF',
      color2: '#0092FF',
      backgroundColor: '#1a2f42'
    });
  }
}
</script>

<style scoped>
/deep/ .el-form-item__label{
  color: white;
  font-weight: bold;
}
</style>